<template>
	<view class="page">
		<mx-navbar title="浏览足迹"></mx-navbar>

		<view class="pbody">
			<view class="pcontent" >
				<mx-watergoods :goods="goods_list"  ref="water_goods" :pn="pn"></mx-watergoods>
				<mx-loading v-model="load" color="#999" v-if="is_empty==1"></mx-loading>
			</view>
			<view class="" v-if="is_empty==2">
				<mx-empty txt="暂无数据～"></mx-empty>
			</view>
		</view>
	</view>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const data = reactive({
	pn: 1,
	is_empty: 1,
	goods_list: []
})

const { goods_list, is_empty } = toRefs(data)

const water_goods = ref(null)

onLoad((options) => {
	getData()
})

const load = ref('loading')
async function getData() {
	
	let res = await proxy.$api('UserHistory', {
		page: data.pn
	}, false)
	if (res.code === 0) {
		data.goods_list = res.data || []
		if(data.pn ==1 && data.goods_list.length == 0) {
			data.is_empty = 2
		}
		if (data.goods_list.length == 0 || data.goods_list.length < 10) {
			load.value = 'finish'
		}
		proxy.$nextTick(()=> {
			water_goods.value.getList(data.goods_list, data.pn)
		})
	}
}

onReachBottom(() => {
	data.pn += 1
	getData(false)
})

</script>

<style scoped lang="scss">
.search {
	width: 100%;
	// #ifdef MP
	margin-right: 180rpx;
	// #endif
	min-height: 0;

	.cuIcon-back {
		padding-left: 20rpx;
	}

	.stxt {
		font-size: 24rpx;
	}

	.name {
		padding: 0 10rpx;
		line-height: 40rpx;
		display: inline-block;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin-right: 10rpx;
	}
}

.pbody {
	width: 100%;
	height: auto;
	padding: 30rpx 0;
}
</style>
